<template>
  <el-row class="tac">
    <el-col :span="3">
      <h5 class="mb-2">Default colors</h5>
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
      >
        <el-sub-menu index="1"  expand-close-icon=""  expand-open-icon="">
          <template #title>
            <el-icon><location /></el-icon>
            <span>Navigator One</span>
          </template>
          <el-menu-item index="1-4">item one</el-menu-item>
          <el-menu-item index="1-5">item one</el-menu-item>
        </el-sub-menu>
       
      </el-menu>
    </el-col>

  </el-row>
</template>

<script lang="ts" setup>
import {
  Location,
} from '@element-plus/icons-vue'

</script>

<style lang="scss">
.el-menu {
  .el-sub-menu {
    .el-sub-menu__title {
      .el-icon:last-child {
        svg {
          display: none;
        }
        &::after {
          content: "";
          width:  20px;
          height:  20px;
          // 默认的收缩的这引入图标即可
          background: url("@/assets/images/down.png") no-repeat;
          background-size: 100% 100%;
          transform: rotate(-180deg);
        }
      }
    }
    &.is-opened {
      .el-sub-menu__title {
      .el-icon:last-child {
        &::after {
             // 展开的的这引入图标即可
          background: url("@/assets/images/down.png") no-repeat;
          background-size: 100% 100%;
          transform: rotate(180deg);
        }
       
      }
    }
    }
  }
  }



</style>